<!--
 * @Author: blak-kong
 * @Date: 2019-12-04 11:18:28
 * @Email: 546598185@qq.com
 -->
<template>
  <div class="nav">
    <el-form
      :model="navForm"
      :rules="rules"
      ref="navForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="导航名称" prop="name">
        <el-input style="width: 300px" v-model="navForm.name"></el-input>
      </el-form-item>

      <el-form-item label="菜单导航" prop="nav">
        <el-button type="primary" size="small" @click="addDialogNav('nav')">新增标签</el-button>
        <div class="nav-box">
          <div class="nb-label" v-for="(item, index) of navForm.nav" :key="index">
            <div class="nb-name">{{item.name}}</div>
            <div class="nb-list">
              <template v-for="(o, i) of item.child">
                <el-button class="nbl-name" size="small" :key="i">{{o.name}}</el-button>
              </template>
              <el-button class="nbl-add" type="primary" size="small" icon="el-icon-plus" @click="addDialogNavTwo('nav', item.name)">添加</el-button>
            </div>
          </div>
        </div>
      </el-form-item>

       <el-form-item label="底部导航" prop="footer">
         <el-button type="primary" size="small" @click="addDialogNav('footer')">新增标签</el-button>
        <div class="footer-box">
          <div class="fb-label" v-for="(item, index) of navForm.footer" :key="index">
            <div class="fb-name">{{item.name}}</div>
            <div class="fb-list">
              <template v-for="(o, i) of item.child">
                <el-button class="fbl-name" size="small" :key="i">{{item.name}}</el-button>
              </template>
              <el-button class="fbl-add" type="primary" size="small"  icon="el-icon-plus" @click="addDialogNavTwo('footer', item.name)">添加</el-button>
            </div>
          </div>
        </div>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('navForm')">立即创建</el-button>
        <el-button @click="resetForm('navForm')">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 弹框页面 -->
    <DialogNav :dialog='dialog' :form='form' @update="editNavOrFooter"></DialogNav>
  </div>
</template>

<script>
import DialogNav from "../components/DialogNav"
export default {
  name: "PageAdd",
  components: {
    DialogNav
  },
  data() {
    return {
      dialog: {
        show: false,
        title: "新增标签",
        option: "add",
        label: label,
        index: this.navForm[label].length,
        level: 1,
        levelIndex: 0,
        levelName: ""
      },
      form: {
        index: "",
        name: "",
        url: "",
        child: []
      },
      navForm: {
        name: '',
        nav: [],
        footer: []
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 2, max: 12, message: '长度在 2 到 12 个字符', trigger: 'blur' }
        ],
      }
    };
  },
  methods: {
    // 提交导航设置
    submitForm(formName) {

    },
    resetForm(formName) {

    },
    // 添加一级导航
    addDialogNav (label) {
      this.dialog = {
        show: true,
        title: "新增标签",
        option: "add",
        label: label,
        index: this.navForm[label].length,
        level: 1,
        levelIndex: 0,
        levelName: ""
      };
      this.form = {
        index: this.navForm[label].length,
        name: "",
        url: "",
        child: []
      }
    },

    // 添加二级导航
    addDialogNavTwo (label, index) {
      let len = this.navForm[label].length
      this.dialog = {
        show: true,
        title: "新增标签",
        option: "add",
        label: label,
        index: index,
        level: 2,
        levelIndex: this.navForm[label][index].child.length,
        levelName: ""
      };
      this.form = {
        index: this.navForm[label][len].child.length,
        name: "",
        url: "",
        child: []
      }
    },

    /**
    * 打开编辑弹窗 传参都是 dialog 需要
    * @param {sring} label 导航分类
    * @param {number} index 一级导航索引
    * @param {number} level 判断等级
    * @param {number} levelIndex 二级导航索引
    * @param {string} levelName 二级导航名称
    * @return {返回值类型} 返回值说明
    */
    editDialogNav (label, index, level, levelIndex, levelName) {
      this.dialog = {
        show: true,
        title: "编辑标签",
        option: "edit",
        label: label,
        index: index,
        level: level,
        levelIndex: levelIndex,
        levelName: levelName
      };
    },

     /**
    * 编辑弹窗 保存调用函数 传参都是 dialog 需要
    * @param {sring} label 导航分类
    * @param {number} index 一级导航索引
    * @param {number} level 判断等级
    * @param {number} levelIndex 二级导航索引
    * @param {string} levelName 二级导航名称
    * @return {返回值类型} 返回值说明
    */
    editNavOrFooter(form, index, levelIndex, levelName) {
      let label = this.dialog.label
      // 一级导航新增
      if (this.dialog.option === "add") {
        if (this.dialog.level === 1) this.navForm[label].push(form)
        if (this.dialog.level === 2) this.navForm[label][index].child[levelIndex].push(form)

        this.dialog.show = false
        return
      }
      // 一级导航修改
      if (this.dialog.level === 1) {
        this.navForm[label][index].name = form.name
        this.navForm[label][index].url = form.url

        this.dialog.show = false
        return
      }
      if (this.dialog.level === 2) {
        this.navForm[label][index].child[levelIndex].name = form.name
        this.navForm[label][index].child[levelIndex].url = form.url

        this.dialog.show = false
        return
      }
    },
  }
};
</script>

<style lang="less" scoped>
.nav {
  padding: 20px;
}

.nav-box, .footer-box {
  display: flex;
  
  width: 90%;
  min-height: 60px;
  padding: 10px;
  margin-top: 10px;
  border-radius: 4px;
  box-sizing: border-box;
  box-shadow: 0 0 3px #333;
  .nb-label, .fb-label {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .nb-name, .fb-name {
    height: 40px;
    line-height: 40px;
  }
}
</style>